<template>
	<view>
		<uni-popup ref="popNecessary" type="center">
			<view class="popNeedContent">
				<view class="titleG">
					<view class="popCheck">{{msgDict.addMust}}</view>
					<view class="popDelete">
						<uni-icons type="closeempty" color="#ccc" size="20" @click='btncolseNeedPopupClick'></uni-icons>
					</view>
				</view>
				<view class="needGoods">
					<scroll-view class="coupons" scroll-y="true" :style="'max-height: '+maxHight+'px;'">
						<view class="vailable" v-for="(item, index) in necessaryArr" :key="index">
							<view class="goodsItem">
								<view class="goodsInfo">
									<view class="img-box">
										<image mode="aspectFill" :src="item.picUrl" class="img" />
									</view>
									<view class="goodsDetailBox">
										<view class="goods-title">
											<view class="two-omit  ellipsis--2">{{item.title}}</view>
											<view class="needLab">{{msgDict.must}}</view>
											<view class="goods-price">¥ {{item.price}}</view>
									    </view>
										<view class="itemBottom">
											<view class="needNum" v-if="item.maxNum == 1">*1</view>
											<!-- 有效商品 -->
											<numbox v-else :title="item.needNum" @clickLeft="btnNeedDetClick(index,item.needNum)" @clickRight="btnNeedAddClick(index,item.needNum)"></numbox>
											<view class="goodSize">
												{{msgDict.size}}<view class="btnSize" @click="btnNeedSizeClick(index)">{{item.showSizeStr}}</view>
											</view>
										</view>
								    </view>
							    </view>
						    </view>
						</view>	
					</scroll-view>
			    </view>
				<view class="btnAddAllGroup">
					<view class="btnAddAll showBtnBackColor" @click="btnAddAllClick">{{msgDict.AddShop}}</view>
				</view>
			</view>	
		</uni-popup>
		<uni-popup ref="popSzieData" type="bottom">
			<view class="categoryContent">
				<view class="pickerBtn">
					<view class="popBnt cancer">{{msgDict.selectSize}}</view>
					<view class="popBnt" @click="btnSizeCancerSex">
						<uni-icons type="closeempty" color="#ccc" size="20"></uni-icons>
					</view>
				</view>
				 <view class="pickerView">
				   <picker-view class="picker" indicator-class="indicator" :value="CategoryStrat" @change="bindSexChange" @pickstart='bindSexStartChange' @pickend='bindSexEndChange'>
						<picker-view-column class="column">
						  <view v-for="(item, index) in CategoryData" :key="index">{{item.value}}</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="btnPopSizeGroup">
					<view class="btnPopSize showBtnBackColor" @click="btnSizeConfirmSex">
						{{msgDict.confirm}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {oneKey} from '@/api/index.js'
	export default {
		name:"goodsNecessary",
		data() {
			return {
			 msgDict:{},
			 maxHight:0,
			 necessaryArr:[],
			 carId:'',//所在购物车
			 canBtn:false,
			 CategoryIndex:-1,//必选的index
			 CategoryStrat:[0],//必选的开始位置
			 CategoryData:[],//必选的数据源
			 chooseStr:''
			};
		},
		props:{
			
			
		},
		created() {
			this.msgDict = getApp().globalData.$t('shopGood');
			let sysInfo = uni.getSystemInfoSync();
			// console.log('sys',sysInfo)
			this.maxHight = sysInfo.windowHeight - 240
		},
		methods:{
			openPop(Arr,carId,chooseStr){
				console.log('getArr',Arr,chooseStr);
				this.necessaryArr = Arr;
				this.carId = carId;
				this.chooseStr = chooseStr
				this.$refs.popNecessary.open();
			},
			//取消必选的商品弹出窗
			btncolseNeedPopupClick(){
			    this.$refs.popNecessary.close();
			},
			btnNeedDetClick(index,itemNum){
				  let item  =  this.necessaryArr[index];
				  
				  if (itemNum  <= 1) {
					
					uni.showToast({
						title:'必选1套',
						icon:'none'
					})
					
					
				  } else{
					  
					item.needNum = itemNum - 1;
					this.necessaryArr.splice(index,1,item);
					
				  }
			},
			btnNeedAddClick(index,itemNum){
						  
				  let item  =  this.necessaryArr[index];
				  
				  if (itemNum < item.maxNum) {
					// debugger
					item.needNum = itemNum + 1;
					
					this.necessaryArr.splice(index,1,item)
						
				  } else{
					  
					uni.showToast({
						title:'该商品限购'+item.maxNum + '件',
						icon:'none'
					})
				  }	  
			},
			btnNeedSizeClick(index){
				this.CategoryIndex = index;
				this.CategoryStrat = [0];
				this.CategoryData = this.necessaryArr[index].size.data;
				
				// this.$refs.popNecessary.close();
				this.$refs.popSzieData.open();
			},
			//必选取消按钮
			btnSizeCancerSex(){
			    this.$refs.popSzieData.close();
			},
			bindSexChange(e){
				console.log('bindCategoryChange',e);
				this.CategoryStrat=e.detail.value;
				
			},
			bindSexStartChange(){
				console.log('321开始转动');
				this.canBtn = true
				
			},
			bindSexEndChange(){
				console.log('321结束转动');
				this.canBtn  =false
			},
			//必选的一键添加
			btnAddAllClick(){
						  
				 let result1 =  this.necessaryArr.some(v=>{
					  
					return  v.showSizeStr == this.chooseStr
					  
				  })
				  
				  if (result1) {
					
				   uni.showToast({
					title:'请选择尺寸',
					icon:'none'
				   },1500)
					
					return
				  }
				  
				  this.requstOneKey();
			
			},
			//一键加入购物车
			async requstOneKey(){
			
			  	try{
						
					let endArr = [];
					this.necessaryArr.forEach(v=>{
						
						endArr.push({goodsId:v.goodsId,num:v.needNum,size:v.showSizeDict});
						
					})	
					let dict ={carId:this.carId,list:endArr};
					let {result} = await oneKey(dict);
					uni.showToast({
						title:'添加成功！',
						icon:'none'
					},1000)
					
					setTimeout(()=>{
						this.$refs.popNecessary.close();
						//更新数据
						this.$emit("clickReload");
					},1000)
					
					
							
			
				} catch(err) {
					console.log('我请求啦',err);
					uni.showToast({
						title:err.message,
						icon:'none'
					})
				}
			},
			//必选确认按钮
			btnSizeConfirmSex(){
						  
				  if (this.canBtn) {
					return;
					
				  }
				  let faindex = this.CategoryIndex;
				  let selIndex = this.CategoryStrat[0];
				  let item  = this.necessaryArr[faindex];
				 
				  item.showSizeDict.code = item.size.code;
				  item.showSizeDict.data = [this.CategoryData[selIndex]];
				  item.showSizeStr = this.CategoryData[selIndex].value;
				  
				  this.necessaryArr.splice(faindex,1,item);
				  
				  this.$refs.popSzieData.close();
						  
			},
		}
		
		
	}
</script>

<style lang="less">
 //必须商品弹出窗
 .popNeedContent{
 	background-color: #FFFFFF;
 	padding-bottom: 20rpx;
 	border-radius: 20rpx;
 	width: 640rpx;
 	.titleG{
 		background-color: #fff;
 		border-bottom: 1px solid #ccc;
 		height: 80rpx;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 		padding-left: 30rpx;
 		padding-right: 20rpx;
 		border-radius: 20rpx 20rpx 0 0;
 		.popCheck{
 			font-size: 32rpx;
 			color: #333;
 		}
 	}
 	.needGoods{
 		padding: 30rpx;
 		.coupons {
 			width: 100%;
 			box-sizing: border-box;
 			max-height: 540upx;
 			 .goodsItem {
 			 	// background-color: #007AFF;
 			 	height: 160rpx;
 			 	display: flex;
 			 	flex-direction: row;
 			 	margin-bottom: 20rpx;
 			 	
 			 	
 			 	.check {
 			 		display: flex;
 			 		align-items: center;
 			 			justify-content: center;
 			 			width: 80rpx;
 			 			height: 100%;
 			 	}
 			 	.goodsInfo {
 			 		flex:1 0 0%;
 			 		display: flex;
 			 		flex-direction: row;
 			 		align-items: center;
 			 		justify-content: space-between;
 			 		// border-bottom: 1upx solid #ccc;
 			 		// margin-top: 20upx;
 			 		// margin-bottom: 20upx;
 			 		.img-box {
 			 			// display: flex;
 			 			// flex-direction: column;
 			 			width: 150upx;
 			 			height: 150upx;
 			 			background-color: #d8d8d8;
 			 			// margin-left: 20upx;
 			 			position: relative;
 			             overflow: hidden;
 			 			border-radius: 8rpx;
 			 			border: thin solid #f2f2f2;
 			 			.img {
 			 				width: 100%;
 			 				height: 100%;
 			 			}
 			 		}
 			 
 			 		.goodsDetailBox {
 			 			display: flex;
 			 			// flex-direction: column;
 			 			justify-content: space-between;
 			 			overflow: hidden;
 			 			// background-color: #FAECD8;
 			 			margin-left: 20upx;
 			 			width: 380rpx;
 			 			height: 100%;
 			 
 			 			.goods-title {
 			 				display: flex;
 			 				justify-content: space-between;
 							flex-direction: column;
 			 				// align-items: center;
 			 					
 			 					.two-omit{
 			 						font-size: 32upx;
 			 						color: #333333;
 			 						// padding: 0upx 20upx 10upx 0;
 			 						font-weight: bold;
 			 						
 			 					}
 									
 			 					.needLab{
 									
 									border-radius: 10rpx;
 									background-color: #FFF1DF;
 									color: #FDAC3D;
 									font-size: 22rpx;
 									font-weight: 500;
 									text-align: center;
 									width: 120rpx;
 									padding: 0 3rpx;
 									
 								}
 			 					.goods-price{
 			 						font-size: 28upx;
 			 						color: #e54d42;
 			 						font-weight: 500;
 			 						white-space: nowrap;
 			 					}
 			 			}
 			 
 			 			.itemBottom {
 			 				// margin-top: 20upx;
 			 				display: flex;
 			 				align-items: flex-end;
 			 				justify-content: space-between;
 							flex-direction: column;
 							margin-left: 30rpx;
 							
 
 			 				// height: 60rpx;
 			 
 			 				.goods-lable {
 			 					font-size: 28upx;
 			 					color: #ccc;
 			 					font-weight: 400;	
 			 				}
 							.needNum{
 								font-size: 24upx;
 								color: #ccc;
 								font-weight: 400;	
 							}
 							.goodSize{
 								display: flex;
 								align-items: center;
 								white-space:nowrap;
 								font-size: 26rpx;
 								color: #666;
 								.btnSize{
 									border-radius: 10rpx;
 									background-color: #f2f2f2;
 									border: thin solid #ccc;
 									// padding: 15rpx 10rpx;
 									text-align: center;
 									width: 90rpx;
 									color: #808080;
 									font-size:24rpx;
 									margin-left: 10rpx;	
 									height: 45rpx;
 									line-height: 45rpx;
 									
 								}
 							}
 	
 			 			}
 			 		
 			 		}
 			 	}
 			 
 			 }
 			 		
 			}
 			
 	}
 	.btnAddAllGroup{
 		border-top:thin solid #f2f2f2;
 		padding: 30rpx 80rpx 10rpx;
 		
 		.btnAddAll{
 		   color: #fff;
 		   // background-color: #FF1493;
 		   height: 84rpx;
 		   line-height: 84rpx;
 		   border-radius: 41rpx;
 		   font-size: 32rpx;
 		   text-align: center;
 					   
 		}
 	}
 	
 	
 }
 .categoryContent{
 	width: 750upx;
 	background-color: #fff;
 	// padding-bottom: 40rpx;
 	.pickerBtn{
 		height: 101rpx;
 		line-height: 101rpx;
 		background-color: #fff;
 		font-size: 30rpx;
 		display: flex;
 		justify-content: space-between;
 		border-bottom: thin solid #ccc;
 		padding: 0 20rpx;
 		
 		.popBnt{
 			// width: 80upx;
 			text-align: center;
 		}
 		.cancer {
 			color: #888;
 		}
 		.confirm{
 			color: #4CD964;
 		}
 	}
 	.picker {
 	  background-color: #fff;
 	  width: 100%;
 	  height: 370rpx;
 	  }
 	  .column {
 		font-size: 40rpx;
 		color: #000;
 		text-align: center;
 		line-height: 80rpx;
 	  }
 	  .indicator {
 		  height: 80rpx;
 		  border-top: thin solid #f2f2f2;
 		  border-bottom:thin solid #f2f2f2;
 	  }
 	  .btnPopSizeGroup{
 		  
 		  bottom: 0rpx;
 		  bottom: calc(0rpx + constant(safe-area-inset-bottom));  
 		  bottom: calc(0rpx + env(safe-area-inset-bottom));
 		  
 		  .btnPopSize{
 			  
 			  color: #fff;
 			  // background-color: #FF1493;
 			  height: 100rpx;
 			  line-height:100rpx;
 			  // border-radius: 10rpx;
 			  font-size: 32rpx;
 			  text-align: center;
 			  
 		  }
 		  
 	  }
 	
 }
</style>
